<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-27 19:28:53
 * @LastEditors: 郝汉森
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
  <div>
    <h2>查看试题</h2>
    <el-card>
      <span style="width:80px">课程类型:</span>
      <el-radio-group v-model="test.subject_id">
        <el-radio-button
          v-for="v in subject"
          :label="v.subject_id"
          :key="v.subject_id"
        >{{v.subject_text}}</el-radio-button>
      </el-radio-group>
      <el-row class="flexs">
        <p>考试类型:</p>
        <el-select v-model="test.exam_id" clearable placeholder="请选择" style="marginRight:35px">
          <el-option
            v-for="item in examType"
            :key="item.exam_id"
            :label="item.exam_name"
            :value="item.exam_id"
          ></el-option>
        </el-select>
        <p>题目类型:</p>
        <el-select
          v-model="test.questions_type_id"
          clearable
          placeholder="请选择"
          style="marginRight:35px"
        >
          <el-option
            v-for="item in questionsType"
            :key="item.questions_type_id"
            :label="item.questions_type_text"
            :value="item.questions_type_id"
          ></el-option>
        </el-select>
        <el-button type="primary" @click="addd">查询</el-button>
      </el-row>
    </el-card>
    <el-card>
      <el-row
        class="row"
        v-for="(item) in questions"
        :key="item.questions_id"
        style="border-bottom:1px solid #ccc"
      >
        <el-col
          :span="23"
          @click.native="$router.push({
            path:'/home/testManage/questions/detail',
            query:{
              id:item.questions_id,
              data:item
            }
          })"
        >
          <el-row>
            <div>{{item.title}}</div>
          </el-row>
          <el-row>
            <el-tag size="mini">{{item.exam_name}}</el-tag>
            <el-tag type="success" size="mini">{{item.questions_type_text}}</el-tag>
            <el-tag type="warning" size="mini">{{item.subject_text}}</el-tag>
          </el-row>
          <el-row style="color:blue">发布人:{{item.user_name}}</el-row>
        </el-col>
        <el-col :span="1" align="right" style="color:blue;lineHeight:80px">
          <span class="editSpan" @click="$router.push({
            path:'/home/testManage/editQuestion',
            query:{
              data:item
            }
          })">编辑</span>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {
      test: {
        subject_id: '',
        exam_id: '',
        questions_type_id: null,
      },
    }
  },
  created() {
    this.getQuestionsTypeApi()
    this.getSubjectApi()
    this.getExamTypeApi()
    this.getQuestionsApi()
  },
  computed: {
    ...mapState('Question', [
      'questionsType',
      'subject',
      'examType',
      'questions',
    ]),
  },
  methods: {
    ...mapActions('Question', [
      'getSubjectApi',
      'getQuestionsTypeApi',
      'getExamTypeApi',
      'getQuestionsApi',
    ]),
    addd() {
      console.log(this.test)
      this.getQuestionsApi(this.test)
    },
  },
}
</script>

<style>
.el-card {
  margin-bottom: 20px;
}
.flexs {
  display: flex;
  width: 100%;
  font-size: 14px;
  margin-top: 20px;
  align-items: center;
}
.el-row {
  margin-bottom: 10px;
}
.editSpan {
  cursor: pointer;
}
.row {
  cursor: pointer;
}
.row:hover {
  background: #f0f5ff;
}
</style>
